<template>
  <div class="questions-random">
    <div class="app-container">
      <el-card>
        <!-- 搜索关键字表单 -->
        <el-form :model="searchForm" ref="searchForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword" label-width="80px">
                <el-input v-model="searchForm.keyword"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="12">
              <el-form-item style="text-align: right">
                <el-button @click="resetForm('searchForm')" size="small">清除</el-button>
                <el-button type="primary" @click="submitForm()" size="small">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据总条数提示 -->
        <div class="dataCount" style="margin-bottom: 15px">
          <el-alert :title="countsTitle" type="info" :closable="false" show-icon></el-alert>
        </div>
        <!-- 组题列表 -->
        <el-table :data="randomsList" style="width: 100%" class="randomsTable">
          <el-table-column prop="id" label="编号" min-width="140"></el-table-column>
          <el-table-column prop="questionType" label="题型" min-width="60">
            <template slot-scope="scoped">
              <span v-if="scoped.row.questionType==1">单选</span>
              <span v-else-if="scoped.row.questionType==2">多选</span>
              <span v-else>简答</span>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="200">
            <template slot-scope="scoped">
              <div @click="previewQues(item.id)" v-for="(item,index) in scoped.row.questionIDs" :key="index">{{ item.number }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" min-width="140"></el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" min-width="100"></el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" min-width="100"></el-table-column>
          <el-table-column prop="userName" label="录入人" min-width="80"></el-table-column>
          <el-table-column label="操作" min-width="80">
            <template slot-scope="scoped">
              <el-button icon="el-icon-delete" circle size="small" type="danger" plain
              @click="deleteQues(scoped.row.id)" title="删除"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格分页 -->
        <div class="block" style="margin-top:20px;text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="searchForm.pagesize"
            background
            :total="counts"
            layout=" prev, pager, next, sizes, jumper">
          </el-pagination>
        </div>
      </el-card>
      <!-- 题库预览功能弹出框 -->
      <questions-preview :isVisible="previewDialogVisible" @showOrHide="previewDialogVisible=false"
      v-model="previewID"></questions-preview>
    </div>
  </div>
</template>

<script>
// 获取组题列表
// 删除题组
import { randoms as getRandoms, removeRandoms } from '@/api/hmmm/questions.js'
// 试题预览组件
import questionsPreview from '@/module-hmmm/components/questions-preview.vue'
export default {
  created () {
    this.getRandoms()
  },
  data () {
    return {
      // 搜索关键字
      searchForm: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      // 组题列表数据
      randomsList: [],
      // 总条数
      counts: null,
      // 条数信息
      countsTitle: '数据加载中...',
      // 预览弹出层显示隐藏
      previewDialogVisible: false,
      // 预览层需要的数据id
      previewID: {}
    }
  },
  components: {
    questionsPreview// 预览
  },
  methods: {
    // 获取列表
    async getRandoms () {
      const res = await getRandoms(this.searchForm)
      // console.log(res.data);
      if (res.status === 200) {
        this.counts = res.data.counts
        this.countsTitle = `数据一共 ${this.counts} 条`
        this.randomsList = res.data.items
      } else {
        this.$message.error('获取组题列表失败')
      }
    },
    // 清空搜索框
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getRandoms()
    },
    // 点击搜索
    submitForm () {
      this.getRandoms()
    },
    // 预览题目
    previewQues (id) {
      this.previewDialogVisible = true
      this.previewID = id
    },
    // 删除功能
    deleteQues (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async res => {
        if (res === 'confirm') { // 代表确认删除
          const res = await removeRandoms({ id })
          if (res.status === 200) {
            // 删除成功
            this.$message.success('删除成功')
            this.getRandoms()
          } else {
            this.$message.error('删除失败')
          };
        }
      }).catch(() => {
        // 取消删除
      })
    },
    // 更改每页显示条数
    handleSizeChange (val) {
      this.searchForm.pagesize = val
      this.getRandoms()
    },
    // 更改页码
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getRandoms()
    }
  }
}
</script>

<style scoped lang='scss'>
  .app-container {
    .el-card {
      .el-table {
        tbody {
          .cell {
            div {
              color: rgb(0, 153, 255);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
